<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 弹幕 Demo</title>
</head>
<body>
<h1>WebSocket 弹幕 Demo</h1>
<input type="text" id="messageInput" placeholder="输入弹幕消息">
<button onclick="sendMessage()">发送弹幕</button>

<div id="messageContainer"></div>

<script>
    // 连接 WebSocket
    //var userId = $("#userId").val(); // 获取用户ID
    //var socket = new WebSocket("ws://localhost:8092/websocket/${userId}" );
    var userId = "2222"; // 获取用户ID
    var socket = new WebSocket("ws://localhost:8091/websocket/" + userId);


    // 接收消息
    socket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        if (data.type === "barrage") {
            // 接收到弹幕消息
            var barrageContent = data.content;
            // 显示弹幕内容
            displayMessage(barrageContent);
        } else if (data.type === "popularity") {
            // 接收到热度值消息
            var popularityValue = data.value;
            // 更新热度值显示
            //updatePopularityDisplay(popularityValue);
        }
    };

    // 发送消息
    function sendMessage() {
        var messageInput = document.getElementById("messageInput");
        var message = messageInput.value.trim();
        if (message) {
            socket.send(message);
            messageInput.value = ""; // 清空输入框
        }
    }

    // 显示消息
    function displayMessage(message) {
        var messageContainer = document.getElementById("messageContainer");
        var messageElement = document.createElement("div");
        messageElement.textContent = message;
        messageContainer.appendChild(messageElement);
    }
</script>
</body>
</html>
